<template>
  <!-- 轮播图 -->
  <div>
    <el-tabs v-model="activeName" stretch @tab-click="handleClick" class="tabs">
      <el-tab-pane label="攻略" name="one" style="color: #fff">
        <div class="input-wrap clearfix">
          <div class="search-input">
            <input
              @blur="ifsearch"
              v-model="str"
              type="text"
              placeholder="你要的攻略我这有"
              @keyup.13="search"
            />
          </div>
          <!-- <router-link to="" class="btn"> -->
          <img
            class="search-img"
            src="../../assets/search/s3.png"
            alt=""
            @click="search()"
          />
          <!-- </router-link> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="酒店" name="two">
        <div class="input-wrap clearfix">
          <div class="search-input1">
            <input
              v-model="str2"
              type="text"
              placeholder="请输入国家、地区、城市名称"
              @keyup.13="search2"
            />
          </div>
          <!-- 日期 -->
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="——"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="el-data"
            >
            </el-date-picker>
          </div>
          <!-- <router-link to="" class="btn"> -->
          <img
            class="search-img"
            src="../../assets/search/s3.png"
            alt=""
            @click="search2"
          />
          <!-- </router-link> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="目的地" name="three">
        <div class="input-wrap clearfix">
          <div class="search-input">
            <input
              v-model="str3"
              type="text"
              placeholder="我要去..."
              @keyup.13="search3"
            />
          </div>
          <!-- <router-link to="" class="btn"> -->
          <img
            class="search-img"
            src="../../assets/search/s3.png"
            alt=""
            @click="search3"
          />
          <!-- </router-link> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="搜演出" name="four">
        <div class="input-wrap clearfix">
          <div class="search-input">
            <input
              v-model="str4"
              type="text"
              placeholder="演出搜索/看演出"
              @keyup.13="search4"
            />
          </div>
          <!-- <router-link to="" class="btn"> -->
          <img
            class="search-img"
            src="../../assets/search/s3.png"
            alt=""
            @click="search4"
          />
          <!-- </router-link> -->
        </div>
      </el-tab-pane>
      <el-tab-pane label="机票" name="frive" class="display-myplY">
        <div style="width: 250px; display: flex">
          <span class="a-play">出发地</span>
          <el-input
            v-model="input"
            @change="search5"
            placeholder="请输入内容"
          ></el-input>
        </div>
        <div class="block">
          <span class="demonstration"> 日期</span>
          <el-date-picker
            size:medium
            v-model="value2"
            align="right"
            type="date"
            placeholder="选择日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
        <img
          class="trick-search"
          src="../../assets/search/s3.png"
          alt=""
          @click="search5"
        />
      </el-tab-pane>
    </el-tabs>

    <!-- 搜索防抖节流 -->
    <div v-show="lengthShow">
      <div class="home-search">
        <div>
          <div
            @click="details(item.mid)"
            class="my-Homesearch"
            v-if="searchShows"
            v-for="(item, index) in searchLists" :key="index"
          >
            <el-image class="elimage" :src="item.image" lazy></el-image>
            <div>
              <p>{{ item.title }}</p>
              <span>{{ item.lable }}</span>
            </div>
          </div>

          <kong v-if="!searchShows">
            <span>空空如也</span>
          </kong>
        </div>
      </div>
    </div>
  </div>
</template>



<script>
// 防抖
import { _debounce, _throttle } from "../../http/delay.js";
import kong from "../../commonality/kong.vue";
export default {
  data() {
    return {
      searchLists: [],
      Myshowcoll: true,
      activeName: "one",
      str: "",
      str2: "",
      str3: "",
      str4: "",
      value1: "",
      value2: "",
      input: "",
      searchShows: true,
      lengthShow: false,
    };
  },
  components: {
    kong,
  },

  methods: {
    handleClick(tab, event) {
      // console.log(tab, event);
    },
    search: _debounce(function (_type, index, item) {
      this.$http
        .post("/trickSearch", {
          title: this.str,
        })
        .then((res) => {
          this.searchLists = res.data.data;
          // console.log(res);
          console.log("节流");
          if (res.data.data.length !== 0) {
            this.searchShows = true;
            this.lengthShow = true;
          } else {
            this.searchShows = false;
            this.lengthShow = true;
          }
        });
    }, 1000),
    // }
    // 失去焦点触发
    ifsearch() {
      if (this.str === "" || this.str === " ") {
        this.lengthShow = false;
      }
    },
    // 点击跳转到详情
    details(mid) {
      let urls = this.$router.resolve({ path: "/community?mid=" + mid });
      window.open(urls.href, "_black");
      this.lengthShow = false;
      this.str = "";
    },

    search2() {
      if (this.str2 == "" || this.str2 == " ") {
        this.$message({
          showClose: true,
          message: "请输入要搜索的城市！",
          type: "warning",
        });
      } else {
        let urls = this.$router.resolve({
          path: "/listHotel/" + this.str2,
        });
        window.open(urls.href, "_black");
        this.str2 = "";
      }
    },
    search3() {
      // 跳转目的地
      if (this.str3 == "" || this.str3 == " ") {
        this.$message({
          showClose: true,
          message: "请输入要搜索的目的地哦！",
          type: "warning",
        });
      } else {
        let urls = this.$router.resolve({
          path: "/dest",
          query: { title: this.str3 },
        });
        window.open(urls.href, "_black");
        this.str3 = "";
      }
    },
    search4() {
      // 跳转搜索页，传搜索值
      if (this.str4 == "" || this.str4 == " ") {
        this.$message({
          showClose: true,
          message: "请输入要搜索的演出信息！",
          type: "warning",
        });
      } else {
        let urls = this.$router.resolve({
          path: "/ySearch",
          query: { datas: this.str4 },
        });
        window.open(urls.href, "_black");
        this.str4 = "";
      }
    },
    search5() {
      if (this.input == "" || this.input == " ") {
        this.$message({
          showClose: true,
          message: "请输入要搜索的机票城市！",
          type: "warning",
        });
      } else {
        let urls = this.$router.resolve({
          path: `/ticket/detail?mid=1&address=${this.input}`,
        });
        window.open(urls.href, "_black");
        this.input = "";
      }
      // ticket/detail?mid=1&address=上海
    },
    pickerOptions(e) {
      // console.log(e);
    },
  },
};
</script>

<style lang="scss" scope>
.tabs {
  // color: #fff!important
  z-index: 3;
  width: 643px;
  height: 109px;
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 4px;
  position: relative;
  bottom: 170px;
  left: 50%;
  margin-left: -320px;
  font-size: 14px;
  margin-right: 20px;
  padding: 10px;
  line-height: 26px;
  border: 0px;
  .input-wrap {
    border: 0px;
    .search-input {
      width: 571px;
      height: 46px;
      border: 0px;
      text-align: center;
      float: left;
      input {
        width: 571px;
        line-height: 46px;
        font-size: 16px;
        color: #666;
        border: none;
        outline: medium;
        border-radius: 4px;
        padding-left: 10px;
      }
    }
    .search-input1 {
      width: 320px;
      height: 46px;
      border: 0px;
      text-align: center;
      float: left;
      padding-right: 10px;
      input {
        box-sizing: border-box;
        padding: 0 10px;
        width: 320px;
        line-height: 46px;
        font-size: 16px;
        color: #666;
        border: none;
        outline: medium;
        border-radius: 4px;
      }
    }
    .block {
      float: left;
      width: 241px;
      height: 46px;
      display: flex;
      .el-data {
        height: 46px;
        width: 241px;
      }
    }
    .btn {
      float: left;
      margin-left: 20px;
      text-align: center;
      img {
        width: 50px;
        height: 46px;
        border: none;
        border-radius: 5px;
      }
    }
  }
}
.display-myplY {
  display: flex;
}

/* .el-tabs__item {
    color: white !important;
  } */
.demonstration {
  margin: 0 15px;
}
.a-play {
  display: block;
  width: 80px;
  line-height: 40px;
}
.trick-search {
  width: 45px;
  height: 40px;
  border-radius: 6px;
  margin-left: 10px;
}

.search-img {
  width: 50px;
  height: 46px;
  border-radius: 3px;
  margin-left: 15px;
}
.home-search {
  position: absolute;
  top: -40px;
  width: 100%;
  z-index: 10;
}
.home-search > div {
  width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: rgb(255, 255, 255);
  border-radius: 10px;
  margin: 0 auto;
  border: 1px solid rgb(224, 224, 224);
  padding: 10px;
  box-sizing: border-box;
  .my-Homesearch {
    margin-bottom: 10px;
    width: 100%;
    height: 130px;
    border: 1px solid rgb(189, 186, 186);
    border-radius: 5px;
    display: flex;
    align-items: center;
    > .elimage {
      width: 700px !important;
      border-radius: 5px;
      height: 130px;
      margin-right: 10px;
    }
    > div {
      > p {
        width: 300px;
        font-weight: bold;
        font-size: 20px;
        margin-bottom: 8px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      > span {
        font-size: 15px;
        color: rgb(133, 133, 133);
      }
    }
  }
}
</style>
